<template>
	<!-- 轮播图 -->
	<uni-swiper-dot :info="info" :current="swiperCurrent" field="content" :mode="mode">
		<swiper class="swiper-box" swiper :current="swiperCurrent" @change="swiperChange" autoplay interval="4000"
			duration="500">
			<swiper-item v-for="(item, index) in info" :key="index" class="swiper-item" @click="goTodetails(index)">
				<image :src="item.image" mode="aspectfit" class="swiper-image"></image>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>


	<view class="box">
<!-- 分段器 -->
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="segmentCurrent" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>


		<view class="content">
			<!-- 精品 -->
			<view v-if="current === 0"><text class="content-text"></text>
					<view class="box-container">
						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/ic_product01.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，MD热水器新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自SER111</view>
									</view>
								</view>
							</view>
						</view>

						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/ic_product02.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，MD咖啡新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自SER222</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="box-container-item">
						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/ic_product03.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，MD饮品新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自SER333</view>
									</view>
								</view>
							</view>
						</view>

						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/ic_product04.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，MD电脑新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自SER444</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>




			<!-- 手机 -->
			<view v-if="current === 1"><text class="content-text"></text>
					<view class="box-container">
						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/product003.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，小米新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自Mee</view>
									</view>
								</view>
							</view>
						</view>

						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/product002.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，华为新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自Qee</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>


			<!-- 服饰 -->
			<view v-if="current === 2"><text class="content-text"></text>
					<view class="box-container">
						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image
									src="https://ts1.cn.mm.bing.net/th/id/R-C.4522da62f2cc7dfbc9c9b318f1942a81?rik=fTOxzDcV42FEbg&riu=http%3a%2f%2fp3.ifengimg.com%2ffck%2f2017_45%2f7937c87a69cd338_w1280_h1695.jpg&ehk=YvuIp7IrUO8Xsz3UvPNGVsnWrX0S0PdRHE9MrsQZLnQ%3d&risl=&pid=ImgRaw&r=0"
									style="width: 320rpx;height: 380rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，辣妹同款GET！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">嘤嘤嘤</view>
									</view>
								</view>
							</view>
						</view>

						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image
									src="https://gw.alicdn.com/imgextra/i1/753164976/O1CN011RkAVU1md3mfk52mv_!!753164976.jpg_Q75.jpg_.webp"
									style="width: 320rpx;height: 380rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，气质温柔风黑色长裙GET！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">Physico</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>

			<!-- 穿搭 -->
			<view v-if="current === 3"><text class="content-text"></text>
					<view class="box-container">
						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image
									src="https://ts1.cn.mm.bing.net/th/id/R-C.b1b3157c9057aeeab695c95de803ac0e?rik=MCdGQ0CKtBsHQg&riu=http%3a%2f%2fimg.mp.itc.cn%2fupload%2f20161215%2fe029be6833794a19a61217bb9bc8aa2e_th.jpg&ehk=hKu0Ng9spww%2f9s9%2f9RtcsDXfcG6PPoflcf2VPwOTeAk%3d&risl=&pid=ImgRaw&r=0"
									style="width: 320rpx;height: 380rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">亮片穿搭+摄影角度</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">Xynn</view>
									</view>
								</view>
							</view>
						</view>

						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image
									src="https://x0.ifengimg.com/res/2021/4A1C1BC49087E4C8416450B35C747E851D0184F5_size143_w1080_h1350.jpeg"
									style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">ccd拍照这个角度也太好看了吧！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">Tyoo</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>

			<!-- 家居 -->
			<view v-if="current === 4"><text class="content-text"></text>
				<view class="box-container">
					<view class="pop-box" @click="goTodetails">
						<view class="white-box">
							<image
								src="https://mdproduct.oss-cn-shenzhen.aliyuncs.com/images/201807/goods_img/0_P_1530657904170.jpg"
								style="width: 320rpx;height: 370rpx;">
							</image>
						</view>
						<view class="bottom">
							<view class="logo_view">
								<view class="item1">#带你快速体验新款</view>
								<view class="item2">重磅推荐，沙发新品试用中！</view>
							</view>
				
							<view class="livetxt">
								<view class="active">
									<image src="../../../static/ic_person.png"></image>
								</view>
								<view class="txt">
									<view class="txttop">ASER</view>
								</view>
							</view>
						</view>
					</view>
				
					<view class="pop-box" @click="goTodetails">
						<view class="white-box">
							<image
								src="https://img.zcool.cn/community/01421e5bc47e6aa801213deaa4105c.jpg@2o.jpg"
								style="width: 320rpx;height: 370rpx;">
							</image>
						</view>
						<view class="bottom">
							<view class="logo_view">
								<view class="item1">#带你快速体验新款</view>
								<view class="item2">ins风装修，奶油照进现实</view>
							</view>
				
							<view class="livetxt">
								<view class="active">
									<image src="../../../static/ic_person.png"></image>
								</view>
								<view class="txt">
									<view class="txttop">Emma</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 分类 -->
			<view v-if="current === 5"><text class="content-text"></text>
					<view class="box-container">
						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/ic_product01.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，MD热水器新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自SER111</view>
									</view>
								</view>
							</view>
						</view>

						<view class="pop-box" @click="goTodetails">
							<view class="white-box">
								<image src="../../../static/ic_product02.png" style="width: 320rpx;height: 370rpx;">
								</image>
							</view>
							<view class="bottom">
								<view class="logo_view">
									<view class="item1">#带你快速体验新款</view>
									<view class="item2">重磅推荐，MD咖啡新品试用中！</view>
								</view>

								<view class="livetxt">
									<view class="active">
										<image src="../../../static/ic_person.png"></image>
									</view>
									<view class="txt">
										<view class="txttop">来自SER222</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {

				items: ['精品', '手机', '服饰', '穿搭', '家居', '分类'],
				current: 0,
				colorIndex: 0,



				info: [{
						content: '内容 A',
						image: '../../../static/ic_banner.png'
					},
					{
						content: '内容 B',
						image: '../../../static/ic_banner01.png'
					},
					{
						content: '内容 C',
						image: '../../../static/ic_banner02.png'
					},
					{
						content: '内容 D',
						image: '../../../static/ic_banner03.png'
					},
					{
						content: '内容 E',
						image: '../../../static/ic_banner04.png'
					},
				],
				current: 0,
				mode: 'round',
				swiperCurrent: 0, // 轮播图当前索引  
				segmentCurrent: 0, // 分段器当前索引  
				styleType: 'black', 
				activeColor: '#616161', 

			};
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			segmentClick(e) {
				this.segmentCurrent = e.currentIndex;
			},
			goTodetails(index) {
				// 假设不管是第一张还是第二张图片，点击都跳转到details页面
				uni.navigateTo({
					url: '/pages/tabBar/details/details', // 确保这是details页面的正确路径
				});
			},
			onClickItem(e) {
				this.current = e.currentIndex;
			},
			onRadioChange(e) {
				// 抽象 styleChange 和 colorChange 到一个方法
				const type = e.target.getAttribute('type'); // 'style' 或 'color'
				this[type + 'Change'](e.detail.value);
			},
		}
	}
</script>


<style scoped>
	.box {
		height: 105vh;
		background-color: #f5f5f5;
	}

	.swiper-box {
		height: 180px;
		/* 根据需要调整高度 */
		width: 100%;
		/* 设置宽度为100% */
	}

	.swiper-item {
		width: 100%;
		/* 确保轮播项宽度占满 */
		height: 100%;
		/* 确保轮播项高度占满 */
		display: flex;
		justify-content: center;
		align-items: center;
		/* 居中显示图片 */
	}

	.swiper-image {
		width: 100%;
		/* 图片宽度占满 */
		height: 100%;
		/* 图片高度占满 */
		object-fit: cover;
		/* 确保图片覆盖整个容器，可能会裁剪 */
	}



	.segmented-control {
		display: flex;
		overflow-x: auto;
		/* 允许水平滚动 */
		white-space: nowrap;
		/* 防止项目换行 */
		border-radius: 5px;
		/* 为分段器添加圆角 */

	}

	.segmented-control .item {
		background-color: #ff5db1;
		/* 分段器项的背景色 */
		margin-right: 10px;
		/* 分段器项之间的间隔 */
		padding: 10px 10px;
		/* 分段器项的内边距 */
		border: none;
		/* 分段器项的边框 */
		cursor: pointer;
	}

	.segmented-control .item.active {
		color: #fff;
		background-color: none;
		/* 活动状态的分段器项背景色 */
	}

	.box-container {
		margin-top: 10px;
		width: 390rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.pop-box {

		background-color: white;
		width: 320rpx;
		height: 580rpx;
		margin-left: 20px;
		border-radius: 7px;

		&>.white-box {
			width: 300rpx;
			height: 100rpx;

		}
	}



	.logo_view {
		width: 180px;
		margin-top: 5px;

		.item1,
		.item2 {
			margin: 5px 0;
			text-align: left;

		}

	}

	.item1 {
		font-size: 12px;
		color: #343434;
		width: 115px;
		margin-left: 10px;
		border: 1px solid #cfcfcf;
		border-radius: 10px;
		padding: 2px;
		box-sizing: border-box;
		transform: scale(0.75);
		/* 缩小文本，0.05是示例值，你可以根据需要调整 */
		transform-origin: left top;
		/* 指定缩放的原点，这里是左上角 */
	}

	.item2 {
		font-size: 13px;
		/* 副标题的字体大小 */
		width: 151px;
		margin-left: 5px;
	}

	.livetxt {
		display: flex;
		align-items: center;
		margin-left: 5px;
		margin-top: 9px;
	}

	.active {
		width: 20px;
		/* 头像容器宽度 */
		height: 20px;
		/* 头像容器高度 */
		border-radius: 50%;
		/* 圆形头像 */
		overflow: hidden;
		/* 确保头像是圆形 */
	}

	.active image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 头像图片覆盖整个容器 */
	}

	.txt {
		margin-left: 10px;
		/* 与头像的间隔 */
	}

	.txttop {
		font-size: 12px;
		font-weight: 550;
		/* 其他文本样式 */
	}

	.box-container-item {
		display: flex;
		justify-content: space-between;
		margin-top: 510rpx;
		width: 390rpx;
		height: 100rpx;
	}
</style>
